<template>
  <div id="page">
    <!-- 截图区域 -->
    <div class="content" ref="content" id="pdfDom">
      <el-descriptions
          class="margin-top"
          title="配送单"
          :column="1"
          :size="size"
          border
          style="margin-bottom: 50px"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Guide /></el-icon>
              配送单号
            </div>
          </template>
          {{data.distributionTaskOrderId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              客户姓名
            </div>
          </template>
          {{data.customerName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              联系电话
            </div>
          </template>
          {{data.tele}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Message /></el-icon>
              邮编
            </div>
          </template>
          {{data.addressId}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              配送地址
            </div>
          </template>
          {{data.address}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template #label>
            <div class="cell-item">
              <el-icon><Timer /></el-icon>
              配送日期
            </div>
          </template>
          __年__月__日
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              备注
            </div>
          </template>

        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Goods /></el-icon>
              商品名称
            </div>
          </template>
          {{this.data.shoppingName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Coin /></el-icon>
              单价
            </div>
          </template>
          {{this.data.price}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><ShoppingCartFull /></el-icon>
              商品数量
            </div>
          </template>
          {{this.data.num}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Link /></el-icon>
              任务类型
            </div>
          </template>
          {{this.data.taskType}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><EditPen /></el-icon>
              客户签名
            </div>
          </template>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 点击调用方法获取截图 -->
    <el-button type="primary" @click="getPrintScreen" :loading="isLoading">打印配送单</el-button>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
import axios from "axios";
import htmlToPdf from '@/util/htmlToPdf';
export default {
  name: "GetImg",
  data() {
    return {
      imgUrl: null, //截图地址
      data:[],
      htmlTitle: '',
      isLoading:false
    };
  },
  methods: {
    //获取截图方法
    getPrintScreen() {
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('配送单');
      // 定时器模拟按钮loading动画的时间
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 1000);

    },
  },
  created() {

    console.log(22222222)
    let data1 = JSON.parse(sessionStorage.getItem('data'))
    let formData = new FormData();
    formData.append('distributionOrderId',data1.distributionTaskOrderId)
    formData.append('orderId',data1.orderId)
    axios.post("http://localhost:1060/taskOrder/getPrintTaskOrder",formData).then(res=>{
      res = res.data;
      console.log(res)
      if (res.code == '200') {
        this.data = res.data
        console.log(res)
      }
    })
  }
};
</script>


<!-- 本demo样式代码（不重要） -->
<style >

</style>
